@extends('layouts.app')

@section('content')
	<div class="main-content">
		<div class="search_inp">
			<table width="100%" border="1" class="table_search">
				<thead>
					<tr>
						<th colspan="7">
							<span>查询条件</span>
						</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td width="10%" align="right"><label>姓名：</label></td>
						<td width="10%"><input type="text" class="w150" name="name" placeholder="请输入姓名关键字"/></td>
						<td width="10%" align="right"><label>身份证号：</label></td>
						<td width="10%"><input type="text" class="w150" name="id_number" placeholder="请输入身份证号"/></td>
						<td width="10%" align="right"><label>所属单位：</label></td>
						<td width="10%"><input type="text" class="w150" name="unit_name" placeholder="请输入单位全名"/></td>
						<td width="10%">
							<input type="hidden" name="map_id" value=""/>
							<input type="hidden" name="city" value=""/>
							<input type="hidden" name="area" value=""/>
							<input type="hidden" name="org_id" value=""/>
							<a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width:70px" onclick="doSearch()">查询</a>
							<a href="javascript:" class="easyui-linkbutton" data-options="iconCls:'icon-large-chart'" style="width:90px" id="tjt">查看统计图</a>
						</td>
					</tr>
				</tbody>
			</table>
		</div>

		<div class="btn-toolbar list-toolbar">
			<div class="form-all mg_t30">
				<table id="baowei" title="保卫人员列表" class="easyui-datagrid" style="width:100%;height:650px"
						data-options="rownumbers:true,singleSelect:true,pagination:true,pageSize:20,url:'{{url('admin/safe/bwllcx')}}',method:'get',fitColumns:'true'">
					<thead>
						<tr>
							<th data-options="field:'city_name'" width="10%" align="center">市</th>
							<th data-options="field:'area_name'" width="10%" align="center">区</th>
							<th data-options="field:'org_name'" width="15%" align="center">所属派出所</th>
							<th data-options="field:'unit_name'" width="15%" align="center">所属单位</th>
							<th data-options="field:'name'" width="5%" align="center">姓名</th>
							<th data-options="field:'sex'" width="5%" align="center">性别</th>
							<th data-options="field:'nation'" width="5%" align="center">民族</th>
							<th data-options="field:'native_place'" width="10%" align="center">籍贯</th>
							<th data-options="field:'education'" width="5%" align="center">文化程度</th>
							<th data-options="field:'political_status'" width="5%" align="center">政治面貌</th>
							<th data-options="field:'phone'" width="10%" align="center">联系电话</th>
							<th data-options="field:'kaohe'" width="6%" align="center">考核情况</th>
							{{--<th data-options="field:'id',formatter:formatAction" width="10%" align="center">操作</th>--}}
						</tr>
					</thead>
				</table>
		  </div>
		</div>
	</div>

	<!--新增-->
	<div id="w" class="easyui-window" closed="true" style="width:900px;height:560px;padding:10px;"></div>

	<style>
		.btns {
			padding-left: 20px;
			margin-bottom: 10px;
		}
		.mg_b20{
			margin-bottom: 20px;
		}
	</style>
	<div id="shili_tb1" class="easyui-window" closed="true">
		<h2 class="text-center mg_b20">保卫人员统计</h2>
		<div class="btns">
			<button class="btn btn-default btn-sm" id="bzt">饼状图</button>
			<button class="btn btn-default btn-sm" id="zzt">柱状图</button>
			<button class="btn btn-default btn-sm" id="zxt">折线图</button>
		</div>
		<div id="bwshul" style="height:470px;width:600px;margin: 0 auto;"></div>
	</div>

	<script type="text/javascript">
		$('#baowei').datagrid({
			rowStyler:function(index,row){
				if (row.kaohe == '合格'){
					return 'background-color:#BEFDA3;color: #0992f5;font-weight:bold;';
				}
				if (row.kaohe == '不合格'){
					return 'background-color:#BEFDA3;color: red;font-weight:bold;';
				}
			}
		});
		function doSearch(){
			$('#baowei').datagrid('load',{
				city: $("input[name='city']").val(),
				area: $("input[name='area']").val(),
				org_id: $("input[name='org_id']").val(),
				name: $("input[name='name']").val(),
				unit_name: $("input[name='unit_name']").val(),
				id_number: $("input[name='id_number']").val(),
			});
		}

		function load_city_data_from_menu($id){
			$('#baowei').datagrid('load',{
				city: $id,
			});
			$("input[name='city']").val($id);
			$("input[name='area']").val('');
			$("input[name='org_id']").val('');
			$("input[name='map_id']").val($id);

			$("input[name='name']").val('');
			$("input[name='id_number']").val('');
			$("input[name='unit_name']").val('');
		}

		function load_area_data_from_menu($id){
			$('#baowei').datagrid('load',{
				area: $id,
			});
			$("input[name='city']").val('');
			$("input[name='area']").val($id);
			$("input[name='org_id']").val('');
			$("input[name='map_id']").val($id);

			$("input[name='name']").val('');
			$("input[name='id_number']").val('');
			$("input[name='unit_name']").val('');
		}
		function load_org_data_from_menu($id){
			$('#baowei').datagrid('load',{
				org_id: $id,
			});
			$("input[name='city']").val('');
			$("input[name='area']").val('');
			$("input[name='org_id']").val($id);
			$("input[name='map_id']").val($id);

			$("input[name='name']").val('');
			$("input[name='id_number']").val('');
			$("input[name='unit_name']").val('');
		}
	</script>
	<script type="text/javascript" src="{{ URL::asset('/') }}js/weizhi.js"></script>
	<script type="text/javascript">
		function edit(){
			$('#w').html('');
			var row = $('#baowei').datagrid('getSelected');
			var shuz = fb2();
			if (row) {
				var url = 'ckbwll/'+row.id;
				$('#w').window({
					title: "查看",
					href: url,
				    width:shuz[0],
					height:shuz[1],
					top:shuz[2],
					left:shuz[3],
					modal:true,
					closed: false,
					minimizable:false,
				});
			} else {
				$.messager.alert('提示','请选中要编辑的行！');
			}
		}

		$("#baowei").datagrid({
			onDblClickRow: function (index, row) {
				edit();
			}
		});
	</script>
	<script type="text/javascript">
		/*function load_city_data_from_menu(id){
			inp_click(id);
			tb_ajax(id);  //表格数据
			bwshul_fn(id) ;   //统计图数据
			console.log(id);
		}
		function load_area_data_from_menu(id){
			inp_click(id);
			tb_ajax(id);  //表格数据
			bwshul_fn(id);    //统计图数据
			console.log(id);
		}
		function load_org_data_from_menu(id){
			inp_click(id);
			tb_ajax(id);     //表格数据
			bwshul_fn(id);    //统计图数据
			console.log(id);
		}*/

	</script>
	<script src="{{ URL::asset('/') }}build/dist/echarts.js"></script>

	<script type="text/javascript">
		var daTa ;

		//保卫人员数量统计
		var bwshul = echarts.init(document.getElementById('bwshul'));
		bwshul_fn();
		function bwshul_fn(id){
			var name =$("input[name='name']").val();
			var unit_name = $("input[name='unit_name']").val();
			var id_number = $("input[name='id_number']").val();
			$.ajax({
				type:"POST",
				url:"{{url('admin/bigapi/getbwry')}}",
				async:true,
				data: {'id':id,'name':name,'unit_name':unit_name,'id_number':id_number,'_token':'{{csrf_token()}}'},
				dateType: 'json',
				success : function(data){
					var obj = {};
					var obj = jQuery.parseJSON(data);
					daTa = obj.city;
				}

			});
		}

		

		$("#tjt").click(function(){
			var id = $("input[name='map_id']").val();
			bwshul_fn(id);    //统计图数据
			console.log(id);
			$('#shili_tb1').window({
				title: "统计图",
				width:'900',
				height:'600',
				top:($(window).height() - 600) * 0.5,
				left:($(window).width() - 900) * 0.5,
				modal: true,
				closed: false,
				minimizable:false
			});
			bwshul.clear();
			setTimeout(function(){
				tubiao1(daTa);
			},200)
		})

		$("#bzt").click(function(){
			bwshul.clear();
			setTimeout(function(){
				tubiao1(daTa);
			},500)

		})

		$("#zzt").click(function(){
			bwshul.clear();
			setTimeout(function(){
				tubiao2(daTa);
			},500)

		})
		$("#zxt").click(function(){
			bwshul.clear();
			setTimeout(function(){
				tubiao3(daTa);
			},500)

		})

		function tubiao1(datas){

			bwshul_option = {
				backgroundColor: '',
				title: {
					left: 'center',
					top: 20,
					textStyle: {
						color: '#ccc'
					}
				},
				tooltip : {
					trigger: 'item',
					formatter: "{a} <br/>{b} : {c} ({d}%)"
				},
				series : [
					{
						name:'保卫人员数量',
						type:'pie',
						radius : '55%',
						center: ['50%', '50%'],
						data:datas,
						roseType: 'radius',
						label: {
							normal: {
								textStyle: {
									color: '#000'
								}
							}
						},
						labelLine: {
							normal: {
								lineStyle: {
									color: '#000'
								},
								smooth: 0.2,
								length: 10,
								length2: 20
							}
						},
						color: ['#1b56ea','#f24949', '#4ddade'],
						itemStyle: {
							normal: {
								color: '',
								shadowBlur: 200,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},

						animationType: 'scale',
						animationEasing: 'elasticOut',
						animationDelay: function (idx) {
							return Math.random() * 200;
						}
					}
				]
			}

// 使用刚指定的配置项和数据显示图表。
			bwshul.setOption(bwshul_option);
		}


		function tubiao2_jian(data){
			var data1 = [];
			for(var i = 0 ;i<data.length;i++){
				data1.push(data[i].name);
			}
			return data1;
		}
		function tubiao2_jian1(data){
			var data2 = [];
			for(var i = 0 ;i<data.length;i++){
				data2.push(data[i].value);
			}
			return data2;
		}

		function tubiao2(datas){
			bwshul_option = {
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : tubiao2_jian(datas),
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis : [
					{
						type : 'value'
					}
				],
				series : [
					{
						name:'保卫人员数量',
						type:'bar',
						barWidth: '20%',
						data:tubiao2_jian1(datas)
					}
				]
			};
// 使用刚指定的配置项和数据显示图表。
			bwshul.setOption(bwshul_option);
		}


		function tubiao3_jian(data){
			var data1 = [];
			for(var i = 0;i<data.length;i++){
				data1.push(data[i].name);
			}
			return data1;
		}
		function tubiao3_jian1(data){
			var data2 = [];
			for(var i = 0;i<data.length;i++){
				data2.push(data[i].value);
			}
			return data2;
		}
		function tubiao3(data){
			bwshul_option = {

				tooltip : {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: 'transparent'
						}
					}
				},
				legend: {
					data:['保卫人员数量'],
					textStyle:{    //图例文字的样式
						color:'#000',
					}
				},
				toolbox: {
					show:false,
					feature: {
						saveAsImage: {}
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'value',
						boundaryGap : false,
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000'
							}
						}
					}
				],
				yAxis : [
					{
						type : 'category',
						data : tubiao3_jian(data),
						axisLabel: {
							show: true,
							textStyle: {
								color: '#000'
							}
						}
					}
				],
				series : [
					{
						name:'保卫人员数量',
						type:'line',
						stack: '总量',
						areaStyle: {normal: {}},
						data:tubiao3_jian1(data)
					},



				]
			};

// 使用刚指定的配置项和数据显示图表。
			bwshul.setOption(bwshul_option);
		}

	</script>

@stop
